<template>
	<view>
		<nav-box :title="type == 1 ? '考生管理' : '场次成绩'"></nav-box>
		<view class="content">
			<view class="examinee-top">
				<view class="search-box u-m-b-48">
					<u-search height="80" placeholder="搜索要管理的考生" v-model="searchVal" :show-action="false" @search="searchExam"></u-search>
				</view>
				<view class="exam-state">
					<text class="title">考场状态</text>
					<view class="info-box">
						<text>总计人数：{{ info.count }}</text>
						<text>缺考人数：{{ info.missTest }}</text>
						<text>在考人数：{{ info.onTest }}</text>
						<text>交卷人数：{{ info.finishTest }}</text>
					</view>
				</view>
			</view>
			<view class="list-box">
				<text class="title">考生信息</text>
				<block v-for="(item, index) in list" :key="index">
					<!-- 将考生id传到下一页获取详细信息 -->
					<navigator :url="`../examineeDetail/examineeDetail?id=${item.id}&type=${type}`" hover-class="none">
						<view class="item-box">
							<view class="item-top">
								<text>{{item.name}}</text>
								<text v-show="type == 1">{{item.state == 1 ? '未交卷' : ''}}</text>
								<text v-show="type == 2">{{item.pz}}</text>
							</view>
							<view class="u-m-b-8">账号：{{item.username}}</view>
							<view>开始时间：{{item.startTime}}</view>
						</view>
					</navigator>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: null,
			searchVal: '',
			info: {},
			list: [],
			
		};
	},
	onLoad(options) {
		this.type = options.type
		// 走接口获取上一页带过来的考场id获取考场状态和考生信息
		this.info = {
			id: 1,
			title: '2021年春季测评考试',
			startTime: '2021/9/01 13:21',
			endTime: '2021/9/01 13:21',
			count: 100, //总计人数
			onTest: 50, //在考人数
			missTest: 20, //缺考人数
			finishTest: 20, //交卷人数
			pattern: '万人万卷', //试卷模式
			examLength: 20, //考试时长
			password: '2233' ,//考场密码
		};
		this.list = [
			{
				id: 1,
				name: '张三',
				username: '13546523369',
				state: 1,
				startTime: '2021/05/21 13:11',
				pz: '优秀'
			},
			{
				id: 2,
				name: '李四',
				username: '13546523369',
				state: 1,
				startTime: '2021/05/21 13:11',
				pz: '及格'
			}
		]
	},
	methods: {
		// 搜索
		searchExam() {
			// 传参 this.searchVal
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #ffffff;
	.content {
		.examinee-top {
			padding: 20upx 0;
			border-bottom: 12upx solid #f7f7f9;
			.search-box {
				padding: 0 40upx;
			}
			.exam-state {
				padding: 0 40upx;
				color: #969696;
				.title {
					color: #4b4b4b;
					display: inline-block;
					margin-bottom: 32upx;
				}
				.info-box {
					display: flex;
					flex-wrap: wrap;
					text {
						width: 50%;
						display: block;
						margin-bottom: 20upx;
					}
				}
			}
		}
		.list-box {
			padding: 32upx 40upx;
			.title {
				color: #4B4B4B;	
			}
			.item-box {
				border-bottom: 2upx solid #F1F1F1;
				padding: 32upx 0;
				font-size: 24upx;
				color: #9D9D9D;
				.item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 8upx;
					text {
						font-size: 32upx;
						color: #4B4B4B;
						&:last-child {
							font-size: 24upx;
							color: #6E6E6E;
						}
					}
				}
			}
		}
	}
}
</style>
